
import { _decorator, Component, Node, CCFloat, EventTouch, UITransform, tween, Vec3, Sprite, Color, Tween, TweenSystem } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('RevolvePageView')
export class RevolvePageView extends Component {

    @property({type: CCFloat, tooltip: "旋转所需的时间"})
    revolveTime : number = 0.8;

    attrArray : string[] = [];
    cardsArray : any[] = [];

    onLoad () {
        this.attrArray = [
            JSON.stringify({
                zIndex: 3,
                scale: 1,
                opacity: 255,
                pos: this.node.children[0].position
            }),
            JSON.stringify({
                zIndex: 2,
                scale: 0.8,
                opacity: 180,
                pos: this.node.children[1].position
            }),
            JSON.stringify({
                zIndex: 1,
                scale: 0.5,
                opacity: 100,
                pos: this.node.children[2].position
            }),
            JSON.stringify({
                zIndex: 0,
                scale: 0.2,
                opacity: 30,
                pos: this.node.children[3].position
            }),
            JSON.stringify({
                zIndex: 1,
                scale: 0.5,
                opacity: 100,
                pos: this.node.children[4].position
            }),
            JSON.stringify({
                zIndex: 2,
                scale: 0.8,
                opacity: 180,
                pos: this.node.children[5].position
            }),
        ];

        // 将cardsNode子节点的各个属性初始化
        this.cardsArray = this.node.children;
        for (let i = 0; i<this.cardsArray.length; i++) {
            this.cardsArray[i].num = i;
            let initAttr = JSON.parse(this.attrArray[i]);
            // this.cardsArray[i].zIndex = initAttr['zIndex'];
            this.cardsArray[i].setScale(new Vec3(initAttr['scale'],
                initAttr['scale'], initAttr['scale']));
            let cardColor = this.cardsArray[i].getComponent(Sprite)!.color;
            cardColor.a = initAttr['opacity'];
            this.cardsArray[i].getComponent(Sprite)!.color = cardColor;
            // this.cardsArray[i].pos = initAttr['pos'];
        }

        // 触摸监听
        this.node.on(Node.EventType.TOUCH_MOVE, this.onTouchMove, this);
    }

    onTouchMove (evt: EventTouch) {
        // 首先判断动作是否执行完
        // for (let i = 0; i < this.cardsArray.length; i++) {
        //     if (this.cardsArray[i].getActionByTag(1)) {
        //         return;
        //     } 
        // }

        let playingNum = TweenSystem.instance.ActionManager.getNumberOfRunningActionsInTarget(this.node);
        if (playingNum > 0) {
            return;
        }

        let deltaX = evt.getDelta().x;
        if (deltaX > this.node.parent!.getComponent(UITransform)!.width / 40) {
            // 说明是往右滑动
            this.revolve2Right();
        } else if (deltaX < -this.node.parent!.getComponent(UITransform)!.width / 40) {
            // 说明是向左滑动
            this.revolve2Left();
        }
    }

    revolve2Right () {
        // 往右旋转
        for (let i = 0; i < this.cardsArray.length; i++) {
            // 所有节点编号+1
            if (this.cardsArray[i].num < this.cardsArray.length-1) {
                this.cardsArray[i].num += 1;
            } else {
                this.cardsArray[i].num = 0;
            }
            
            // 获取目标属性
            let nextAttr = JSON.parse(this.attrArray[this.cardsArray[i].num]);

            // 改变z值
            this.cardsArray[i].zIndex = nextAttr['zIndex'];
            
            let card = this.cardsArray[i];
            let cardColor = card.getComponent(Sprite)!.color;
            // 改变大小、透明度、位置
            tween(card).sequence(
                tween(card)
                    .to(this.revolveTime, { scale: new Vec3(nextAttr['scale'], nextAttr['scale'], nextAttr['scale'])}),
                tween(card.getComponent(Sprite)!)
                    .to(this.revolveTime, { color: new Color(cardColor.r, cardColor.g, cardColor.b, nextAttr['opacity'])}),
                tween(card)
                    .to(this.revolveTime, {position: nextAttr['pos']})
            ).tag(1).start();

            // let scaleAction = cc.scaleTo(this.revolveTime, nextAttr['scale']);
            // let fadeAction = cc.fadeTo(this.revolveTime, nextAttr['opacity']);
            // let moveAction = cc.moveTo(this.revolveTime, nextAttr['pos']);
            // let spawnAction = cc.spawn(scaleAction, fadeAction, moveAction);
            // spawnAction.setTag(1);      // 设置动作标签
            // this.cardsArray[i].runAction(spawnAction);
        }   
    }

    revolve2Left () {
        // 往左旋转
        for (let i = 0; i < this.cardsArray.length; i++) {
            // 所有节点编号-1
            if (this.cardsArray[i].num > 0) {
                this.cardsArray[i].num -= 1;
            } else {
                this.cardsArray[i].num = this.cardsArray.length-1;
            } 

            // 获取目标属性
            let nextAttr = JSON.parse(this.attrArray[this.cardsArray[i].num]);

            // 改变z值
            this.cardsArray[i].zIndex = nextAttr['zIndex'];

            let card = this.cardsArray[i];
            let cardColor = card.getComponent(Sprite)!.color;
            // 改变大小、透明度、位置
            tween(card).sequence(
                tween(card)
                    .to(this.revolveTime, { scale: new Vec3(nextAttr['scale'], nextAttr['scale'], nextAttr['scale'])}),
                tween(card.getComponent(Sprite)!)
                    .to(this.revolveTime, { color: new Color(cardColor.r, cardColor.g, cardColor.b, nextAttr['opacity'])}),
                tween(card)
                    .to(this.revolveTime, {position: nextAttr['pos']})
            ).tag(1).start();
            
            // 改变大小、透明度、位置
            // let scaleAction = cc.scaleTo(this.revolveTime, nextAttr['scale']);
            // let fadeAction = cc.fadeTo(this.revolveTime, nextAttr['opacity']);
            // let moveAction = cc.moveTo(this.revolveTime, nextAttr['pos']);
            // let spawnAction = cc.spawn(scaleAction, fadeAction, moveAction);
            // spawnAction.setTag(1);      // 设置动作标签
            // this.cardsArray[i].runAction(spawnAction);
        }   
    }
}
